<template>
<div>
  <div class="login_img flex_">
    <img src="../../static/images/6.jpg" alt="">
  </div>
  <div class="bar flex_">
    <div class="from flex_">
      <div class="input_item">
        <input v-model.trim="account"
               type="text"
               placeholder="请输入账号"
               class="input_"
               />
        <u-icon class="input_icon" size="55" name="account" color="#2196f3"></u-icon>
      </div>
      <div class="input_item">
        <input v-model="password"
               type="password"
               placeholder="请输入密码"
               class="input_"
               />
        <u-icon class="input_icon" size="55" name="lock-open" color="#2196f3"></u-icon>
      </div>
      <div class="btn_item">
        <u-button :loading="loading" type="primary"  shape="circle" @click="toLogin">登录</u-button>
      </div>

    </div>
  </div>

  <u-toast ref="uToast" />
</div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      account:'',
      password:'',
      loading:false,
    }
  },
  methods:{
    toLogin(){
      if (this.account&&this.password){
        this.loading = true
        let form = {account:this.account,password:this.password}
        this.$http.post('/login', {...form}).then(res=>{
          this.loading = false
          if (res.code==200){
            this.$toast.success(res.msg,'sucess')
            uni.setStorageSync('client_name', res.data.client_name);
            uni.setStorageSync('mobile', res.data.mobile);
            uni.setStorageSync('account', res.data.account);
            uni.setStorageSync('isLogin', true);
            setTimeout(()=>{
              uni.switchTab({
                url: '/pages/mine/index'
              })
            },1500)

          }else {
            this.$toast.error(res.msg)
          }
        })
      }else {
        console.log('不通过')
        this.$toast.info('不是完整的账号与密码')
      }

    },

  }
}
</script>

<style scoped>

.bar{
  /*width: 100%;*/
  height: calc(100vh - 230px);
  /*background-color: rgb(243,242,242);*/
  padding: 20px;
  position: relative;

}
.from{
  width: 90%;
  height: 300px;
  background-color:  rgb(251,251,251);
  border-radius: 24px;
  box-shadow: 1px 1px 1px #ececec,-1px -1px 1px #ececec;
  position: absolute;
  top: -20px;
  padding: 50px 20px;
  flex-direction: column;
}

.input_item{
  width: 200px;
  height: 45px;
  margin: 10px;
  position: relative;
}
.input_{
  border: 1px #2196f3 solid;
  width: 200px;
  height: 45px;
  border-radius: 20px;
  padding-left: 15px;
  background-color: #fff;
}
.input_icon{
  position: absolute;
  top: 10px;
  left: -40px;
}
.btn_item{
  width: 220px;
  height: 45px;
  margin: 20px;
}

</style>